<template>
	<div id="homdes">
		<Head></Head>
		<div  class="header"> 
			<el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block;font-size: 12px;">
			  <el-breadcrumb-item>房天下</el-breadcrumb-item>
			  <el-breadcrumb-item>北京二手房</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="tabs-all">
			<div class="tab">
				<span @mouseover="active=1" :class="active==1?'active':''">区域</span>
				<span @mouseover="active=2" :class="active==2?'active':''">地铁</span>
				<span class="active-thrss">地图</span>
			</div>
		<el-checkbox-group v-model="checkList">
			<div class="tab-list">
				<div class="list">
					<div class="left">地铁</div>
					<div class="right" v-for="(item,index) in 16" :key="index">{{item}}号线</div>
				</div>
				<div class="list">
					<div class="left">距离</div>
					<div class="right" v-for="(item,index) in 5" :key="index">{{item*120}}米以内</div>
				</div>
				<!-- 开始有宽 -->
				<div class="list list-w">
					<div class="left">距离</div>
					<div class="right" v-for="(item,index) in 5" :key="index">
						<el-checkbox label="复选框 A"></el-checkbox>
					</div>
					<div class="thrss">
						<input type="text" value="" />
						<span>-</span>
						<input type="text" value="" />
						<button>确定</button>
					</div>
				</div>
				
				<div class="list list-w">
					<div class="left">总价</div>
					<div class="right" v-for="(item,index) in 5" :key="index">
						<el-checkbox label="复选框 A"></el-checkbox>
					</div>
				</div>

				<div class="list list-w">
					<div class="left">距离</div>
					<div class="right" v-for="(item,index) in 5" :key="index">
						<el-checkbox label="复选框 A"></el-checkbox>
					</div>
					<div class="thrss">
						<input type="text" value="" />
						<span>-</span>
						<input type="text" value="" />
						<button>确定</button>
					</div>
				</div>
				
				<div class="list list-w">
					<div class="left">总价</div>
					<div class="right" v-for="(item,index) in 5" :key="index">
						<el-checkbox label="复选框 A"></el-checkbox>
					</div>
				</div>
				
				<div class="list list-w">
					<div class="left">总价</div>
					<div class="right" v-for="(item,index) in 5" :key="index">
						<el-checkbox label="复选框 A"></el-checkbox>
					</div>
				</div>
			</div>
		</el-checkbox-group>
		<!--更多找房条件  -->
		  <div class="tab-bottom">
			  <span>更多找房条件</span>
			  <div class="select">
				<el-select v-model="value" placeholder="请选择" clearable>
				  <el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value">
				  </el-option>
				</el-select>
			  </div>
			  <div class="select">
				<el-select v-model="value" placeholder="请选择" clearable>
				  <el-option
					v-for="item in options"
					:key="item.value"
					:label="item.label"
					:value="item.value">
				  </el-option>
				</el-select>
			  </div>
		  </div>
		  <!-- 当前找房条件 -->
		  <div class="tab-bottom-mos">
			  <div class="div">更多找房条件</div>
			  <div class="select">
					  <span>离子型</span>
					  <i class="el-icon-close" style="color: red;"></i>
			  </div>
			  <div class="select deft">
				  <i class="el-icon-delete"></i>
				  <span>清空全部</span>
			  </div>
		  </div>
		</div>
		<!-- body -->
		<div class="body">
			<div class="tabs">
				<div :id="tabsBody==1?'tabsBody':''" @click="tabsBody=1">全部房源</div>
				<div :id="tabsBody==2?'tabsBody':''" @click="tabsBody=2">优选房源</div>
				<div :id="tabsBody==3?'tabsBody':''" @click="tabsBody=3">业务委托</div>
			</div>
			<div class="body-sort">
				<div class="left-sort">
					<div>默认排序</div>
					<div>发布时间</div>
					<div>总价 <i class="el-icon-arrow-down"></i></div>
					<div>单价 <i class="el-icon-arrow-down"></i></div>					
				</div>
				<div class="right-sort">
					<el-checkbox v-model="sort" style="margin-right: 20px;">合并相似房源</el-checkbox>
					<i class="el-icon-s-grid" title="切换到列表"></i>
				</div>
			</div>
			<!-- 商品展示列表 -->
			<div class="body-list">
				<div v-for="(item,index) in 15" :key="index" class="body-list-div">
					<div class="body-list-img">
					   <img src="../home/phb1.jpg" />
					</div>
					 
					 <div class="body-list-right">
						 <div class="h1">(440万)重装修未入住随时看房签拎包住老业主君安国际</div>
						 <!-- <div class="addrss">林肯公园C区住宅</div> -->
						 <div class="brief" style="margin: 15px 0;">3室2厅  &nbsp;|&nbsp; 149㎡  &nbsp;|&nbsp; 低层（共18层）</div>
						 <div class="people">
							<i class="el-icon-user-solid" style="color:#E1E1E1;margin-right: 5px;"></i>
							<span>德邦三少</span>
						 </div>						 
					 </div>
				</div>
			</div>
		</div>
		
	</div>
</template>
<script>
import Head from '../home/head.vue';
export default {
	name:"houseTwo",
    components: {Head},
	data(){
		return{
			margin:"margin:15px 50px 0 50px;",
			active:1,
			checkList:[],
			tabsBody:1,
			sort:false,
        options: [{
          value: '选项1',
          label: '黄金糕'
        }, {
          value: '选项2',
          label: '双皮奶'
        }, {
          value: '选项3',
          label: '蚵仔煎'
        }, {
          value: '选项4',
          label: '龙须面'
        }, {
          value: '选项5',
          label: '北京烤鸭'
        }],
        value: ''
		}
	},
	methods:{

	}
}
</script>
<style lang="css" scoped>
.body-list{
	/* border: 1px solid red; */
}
.body-list .body-list-div{
	color: #333333;margin-top: 15px; 
	position: relative;
}
.body-list .body-list-div .body-list-right{
	display: inline-block;
	position: absolute;
	left: 235px;top: 0;
	line-height: 30px;
}
.body-list .body-list-div div{
	font-size: 14px;
}
/* .body-list .body-list-div .addrss{
	    display: block;
	    width: 200px;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    white-space: nowrap;
} */
.body-list .body-list-div img{
	width: 100%;height: 100%;
}
.body-list .body-list-div .body-list-img{
	display: inline-block; width: 220px;height: 166px;
}
.body-list .body-list-div .h1{
	    width: 100%;
	    line-height: 36px;
	    height: 36px;
	    overflow: hidden;
		font-weight: bold;
	    text-overflow: ellipsis;
	    white-space: nowrap;
		font-size: 20px;
}
.body-sort .left-sort div{
	font-size: 14px; color: #565c67;display: inline-block;margin-right: 42px;cursor: pointer;
}
.body-sort{
	position: relative;
	margin-top: 14px;
	height: 30px;   
	/* 这里修改 */
}
.body-sort .right-sort{
	position: absolute;right: 0;
}
.body-sort .right-sort .el-icon-s-grid{color: #D7D7D7;cursor: pointer;}
.body-sort .right-sort .el-icon-s-grid:hover{color: #cccccc;}
.body-sort .left-sort{
	position: absolute;left: 0;
}
.body .tabs {
	border-bottom: 2px solid #df2f30;margin-top: 30px;
}
.body .tabs div{
	font-size: 16px; color: #333; font-weight: bold; display: inline-block;width: 116px;height: 40px;text-align: center;line-height: 40px;cursor:pointer;
}
.body .tabs #tabsBody{
	color: white;background-color: #df2f30;
}
.list-w .right{
	width: 100px;
}
.tabs-all .tab-bottom-mos .select{
	display: inline-block; height: 30px;background-color: #ececec;line-height: 30px;text-align: center;padding: 0 15px;margin-right: 15px;cursor: pointer;
}
.tabs-all .tab-bottom-mos .select:hover span{ color: red;}
.tabs-all .tab-bottom-mos .deft{
	background-color: transparent;
}
.tabs-all .tab-bottom-mos .select span{
	font-size: 12px;
}
.tabs-all .tab-bottom-mos{
	height: 50px;padding-left: 20px;line-height:50px;
}
.tabs-all .tab-bottom-mos .div{
	display: inline-block;
	font-size: 12px;
	margin-right: 24px;
	color: #999;
}
.tabs-all .tab-bottom .select{
	display: inline-block;
	width: 88px;margin: 0 10px;
}
.tabs-all .tab-bottom{
	height: 50px;padding-left: 20px;background-color: #F5F5F5;line-height: 50px;
}
.tabs-all .tab-bottom span{
	font-size: 12px;
	margin-right: 24px;
	color: #999;
}
.list-w .thrss{
	line-height: 18px;
}
.list-w .thrss button{
	outline: none;background-color: transparent;
	border: 1px solid #DCDFE6;
}
.list-w .thrss input{
	border: 1px solid #DCDFE6;outline: none;
	width: 47px;height: 22px;padding: 0 2px;
}
.tabs-all .tab-list .list div{
	display: inline-block;font-size: 12px;
}
.tabs-all .tab-list .list .left{
	font-weight: 700;width: 45px;
}
.tabs-all .tab-list .list .right{
	margin: 0 7px;cursor: pointer;
}
.tabs-all .tab-list .list .right:hover{
	color: red;
}
.tabs-all .tab-list .list{
	margin-top: 15px;
}
.tabs-all .tab-list .list:nth-of-type(1){
	margin-top: 0;
}
.tabs-all .tab-list{
	padding:20px  20px;
}
.tabs-all{
	background-color: #FBFBFB;
	font-size: 14px;color: #333;
}
.tabs-all .tab{
		border-bottom: 1px solid #f2f2f2;
		height: 40px;line-height: 40px;padding-left: 20px;
	}
.tabs-all .tab span{
	display: inline-block;
	height: 100%;cursor: pointer;
	border-bottom:2px solid transparent;
}
.tabs-all .tab span:nth-of-type(2){
	margin: 0 35px;
}
.tabs-all .tab .active{
	border-color:red;
	color: red;
}
.tabs-all .tab .active-thrss:hover{
	color: red;
}
.header{
	height: 58px;
	line-height: 58px;
}	
</style>